* {
    /* 初始化 取消页面的内外边距 */
    padding: 0;
    margin: 0;
}

body {
    /* 弹性布局 让页面元素水平+垂直居中 */
    display: flex;
    align-items: center;
    justify-content: center;
    /* 让页面始终占浏览器总高 */
    height: 100vh;
    background: #222;
}

.content {
    /* 相对定位 */
    position: relative;
    color: #fff;
    font-size: 40px;
}

.text {
    /* 设置相对定位 */
    position: relative;
    /* 23个字符 × 每个字符的宽度 */
    width: calc(23 * 40px);
}

.text::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: #222;
    /* 使用文本显示动画 */
    animation: typing 8s steps(23) forwards;
}

.text span {
    /* 设置等宽字体 */
    font-family: monospace;
    display: inline-block;
    width: 40px;
    text-align: center;
    overflow: hidden;
}

.cursor {
    display: inline-block;
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 40px;
    height: 7px;
    background-color: #fff;
    opacity: 0;
    /* 使用光标闪动以及光标移动的动画 */
    animation: bling 300ms infinite alternate, move 8s steps(23) forwards;
}

/* 设置文本显示动画 */
@keyframes typing {
    to {
        width: 0;
    }
}

/* 定义光标闪动的动画 */
@keyframes bling {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* 定义光标移动动画 */
@keyframes move {
    to {
        left: 100%;
    }
}